<template>
  <div class="add-box">
    <el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>新增文章</span>
  </div>
  <el-form :inline="true" :model="list" class="demo-form-inline"  :rules="rules" ref="list">
    <el-row :gutter="20">
  <el-col :span="9"  :offset="2">
    <div class="grid-content bg-purple">
      <el-form-item label="作者" prop="author">
    <el-input v-model="list.author" placeholder="作者"></el-input>
  </el-form-item>
    </div>
    </el-col>
  <el-col :span="9">
    <div class="grid-content bg-purple">
      <el-form-item label="标题">
    <el-input v-model="list.title" placeholder="标题"></el-input>
  </el-form-item>
    </div>
    </el-col>
  <el-col :span="4">
    <div class="grid-content bg-purple">
      <el-form-item label="是否显示">
    <el-switch v-model="list.isShow"
    :active-value="1"
    :inactive-value="0"
    ></el-switch>
  </el-form-item>
    </div>
    </el-col>
</el-row>
<el-row :gutter="20">
  <el-col :span="24" :offset="2">
   <el-form-item label="摘要" prop="summary"  >
      <el-input type="textarea" :rows="4" v-model="list.summary"  cols="80" ></el-input>
  </el-form-item>
    
  </el-col>
</el-row> 

  <el-row :gutter="6" >
  <el-col :span="6" :offset="2"><div class="grid-content bg-purple">
    <el-upload
  class="upload-demo"
  action="/lejuAdmin/material/uploadFileOss"
  :headers="headers"
  :on-success="handleChange"
  :file-list="fileList">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    <div v-if="fileUrl!=''">
      <img :src="fileUrl" alt="">
    </div>
</el-upload>
    </div></el-col>
</el-row>
  <el-row :gutter="20">
  <el-col :span="8"><div class="grid-content bg-purple">
    <el-form-item  label="编辑类型">
    <el-radio-group v-model="list.editorType" @change="editchange">
  <el-radio  :label="0">富文本</el-radio>
  <el-radio  :label="1">MarkDown</el-radio>
  
</el-radio-group>
  </el-form-item>
    </div></el-col>
  <el-col :span="6" :offset="1"><div class="grid-content bg-purple">
      <el-alert
    title="注意!切换编辑器会清空编辑内容"
    type="warning">
  </el-alert>
    </div></el-col>
</el-row>
  
  <!-- 文本框 -->
    <div v-show="list.editorType===0">
      <el-upload
      ref="tinUpload"
  action="/lejuAdmin/material/uploadFileOss"
  :headers="headers"
  :on-success="tinImage"
>
  <el-button size="small" type="primary">插入图片</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
      <Tinymce ref="Tin" />
    </div>
    <div v-show="list.editorType===1">
      <makedownmd ref="mark"/>
    </div>
  <el-form-item>
    
    <el-button type="primary" @click="onSubmit" v-if="list.id==undefined">提交文章</el-button>
    <el-button type="primary" @click="onSubmit" v-else>更改文章</el-button>
  </el-form-item>
</el-form>
</el-card>
  </div>
</template>

<script >
import { getToken } from '@/utils/myAuth';
import {addArticle,productArticle,updateArticle} from "@/api/content/index"
import Tinymce from "@/components/Tinymce"
import makedownmd from "@/components/MarkdownEditor"
export default {
  data () {
    return {
       rules: {
          author: [
            { required: true, message: '请输入作者姓名', trigger: 'blur' },
          ],},
      list:{
        author:'',
        title:'',
        isShow:0,
        summary:'',
        coverImg:'',
        editorType:0,
        content1:'',
      },
      fileList:[],
      fileUrl:'',
    };
  },

  components: {
    Tinymce,makedownmd
  },

  computed: {
    headers(){
      return {
        token:getToken()
        }
    }
  },
  created(){
    console.log(this.$route.query.id)
    var id=this.$route.query.id
    var _this=this
    if(id!=undefined){
      productArticle(id).then(res=>{
        console.log(res.data.productArticle)

        if(res.success){
          _this.list=res.data.productArticle
          // res.data.productArticle.editorType===0
            _this.$refs.Tin.setContent(res.data.productArticle.content1)

            _this.$refs.mark.setHtml(res.data.productArticle.content1)

          
          
        }
      })
    }
  },
  mounted() {
    
  },

  methods: {
    // 监听事件
    editchange(){
      console.log(this.list.editorType)
    },
    // tijiao
    onSubmit() {
      console.log(this.$refs.Tin.getContent())
        this.$refs.list.validate((valid) => {
          if (valid) {
            var _this=this
            if(_this.list.editorType===0){
                this.list.content1=this.$refs.Tin.getContent()
            }else{
              this.list.content1=this.$refs.mark.getHtml()
            }
            
       var id=this.$route.query.id
      if(id!=undefined){
        updateArticle(_this.list).then(res=>{
          console.log(res)
          if(res.success){
            _this.$message.success('修改成功')
            this.$router.push({path:'/example'})
          }
        })
      }else{
        addArticle(_this.list).then(res=>{
          if(res.success){
            _this.$message.success('添加成功')
            this.$router.push({path:'/example'})
          }
        })
      }
          } else {
            this.$message.success("请输入作者名")
            return false;
          }
        });
      },
      //上传图片成功的回调
      tinImage(res,file){
        if(res.success){
          // 插入图片
          this.$refs.Tin.imageSuccessCBK(res.data.fileUrl)
          this.$refs.tinUpload.clearFiles()
        }else{
          this.$message.error("上传失败")
        }
      },
      handleChange(file, fileList) {
        var _this=this
       
        if(file.code==20000){
          _this.fileUrl=file.data.fileUrl
          _this.list.coverImg=file.data.fileUrl
        }else{
          this.$message.error('对不起选择失败请重新上传')
        }
        console.log(file.data.fileUrl,'file')
      }
  }
}

</script>
<style lang="scss" scoped>
.add-box{
  margin: 30px;
}
.grid-content{
  width: 100%;
}
#el-form-text {
  width: 100%;
}

</style>